<template>
	<view class="topic">
		<view class="h2">专题精选</view>
		<view class="topic-scroll">
			<u-scroll-list :indicator="indicator">
				<view v-for="(item, index) in topicList" :key="index" class="scroll-nav">
					<image :src="item.picUrl"><view class="scroll-price">
						{{item.price}}起
					</view></image>
					
					<view class="scroll-font">
						<view class="scroll-title">
							{{item.title}}
						</view>
						<view class="scroll-subtitle">
							{{item.subtitle}}
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			topicList: {
				type: Array
			}
		},
		data() {
			return {
				indicator: false
			}
		},
	}
</script>

<style lang="scss" scoped>
	$marginBottom: 30rpx;
	$backColor: #f4f4f4;
	@import 'uview-ui/index.scss';

	.topic {
		margin-top: $marginBottom;
		background-color: $uni-bg-color;

		.h2 {
			line-height: 60px;
			text-align: center;
			font-size: 40rpx;
			padding: $marginBottom;
		}

		.topic-scroll {
			
			.scroll-nav {
				padding-left: 30rpx;
				image {
					position: relative;
					margin-bottom: 30rpx;
				}
				.scroll-price {
					position: absolute;
					background-color: rgba($color: $uni-color-warning, $alpha: 0.5);
					width: 200rpx;
					height: 50rpx;
					text-align: center;
					top: 0;
					border-top-right-radius: 20px;
					border-bottom-right-radius: 20px;
					color: #fff;
				}
			}

			.scroll-font {
				.scroll-title {
					font-size: 35rpx;
					margin-bottom: 10rpx;
				}

				.scroll-subtitle {
					color: #a3a3a3;
					font-size: 25rpx;
				}
			}

		}
	}
</style>
